<template>
  <div class="graphitizing">
    <div class="cardTop">
      <div class="seachAndState">
        <el-form
          size="small"
          :inline="true"
          :model="allData"
          class="demo-form-inline"
        >
          <el-form-item label="日报表/月报表">
            <div class="select-equip">
              <el-select
                v-model="value"
                placeholder="选择日报表/月报表"  
              ><!-- @change="getData()" 上面改变选项更新数据也可以-->
                <el-option v-for="item in reportList" :key="item.value" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </div>
          </el-form-item>
           <!--月份筛选-->
          <el-form-item label="时间筛选" v-show="value==1">
            <div class="select-equip">
              <el-select v-model="value1" placeholder="选择月份进行筛选"
                ><!-- @change="getData()" 上面改变选项更新数据也可以-->
                <el-option
                  v-for="item in monthList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="getData()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 表格 -->

    <div class="card-table">
      <el-table
        :header-cell-style="getRowClass"
        :data="allData"
        style="width: 100%"
      >
        
        <el-table-column label="日期" prop="0" align="center" fixed= "left" width="190" sortable>
         <template slot-scope="{ row }">
            <span>{{ getTime(row.times,row.dayOrNight) }}</span>
          </template>
      </el-table-column>

      <el-table-column  align="center" width="160" label="A炉前1温度(℃)" >
              <template slot-scope="{ row }"><div>{{parseFloat(row.date[2].value).toFixed(1)}}</div>
              </template>
            </el-table-column>

            <el-table-column  align="center" width="160" label="A炉前2温度(℃)" >
              <template slot-scope="{ row }"><div>{{parseFloat(row.date[3].value).toFixed(1)}}</div>
              </template>
            </el-table-column>

            <el-table-column  align="center" width="160" label="A炉中1温度(℃)" >
              <template slot-scope="{ row }"><div>{{parseFloat(row.date[0].value).toFixed(1)}}</div>
              </template>
            </el-table-column>

            <el-table-column  align="center" width="160" label="A炉中2温度(℃)" >
              <template slot-scope="{ row }"><div>{{parseFloat(row.date[1].value).toFixed(1)}}</div>
              </template>
            </el-table-column>

            <el-table-column  align="center" width="160" label="A炉后1温度(℃)" >
              <template slot-scope="{ row }"><div>{{parseFloat(row.date[4].value).toFixed(1)}}</div>
              </template>
            </el-table-column>

            <el-table-column  align="center" width="160" label="A燃烧室温度(℃)" >
              <template slot-scope="{ row }"><div>{{parseFloat(row.date[5].value).toFixed(1)}}</div>
              </template>
            </el-table-column>

        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template slot-scope="{ row }">
            <div class="tablebBtn">
              <el-button
                type="text"
                class="btnText"
                size="small"
                @click="goReportDetail(row)"
              >
                <el-link
                  style="color: #409eff; font-size: 12px !important"
                  :underline="false"
                  >导出报表</el-link
                ></el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div
        style="display: flex; flex-direction: row-reverse; margin-top: 10px"
      >
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="totalCount"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- <el-drawer
      :with-header="false"
      direction="rtl"
      :visible.sync="drawer"
      :before-close="handleClose"
      destroyOnClose
      append-to-body
      size="980px"
    >
     
      <ReportDetail />
    </el-drawer> -->
  </div>
</template>

<script>
import ReportDetail from "./reportDetail.vue";
import {
  MonthReport,
  DailyReport,
  DailyReports,
  MonthReports
} from "@/api/process";
export default {
  name: "hisReport",
  components: { ReportDetail },
  data() {
    return {
      drawer: false,
      pageSize: 10, // 分页的页面大小
      totalCount: 0, // 分页的数据总数
      currentPage: 1, // 分页的当前页
      reportList: [
        { name: "日报表", value: 1 },
        { name: "月报表", value: 2,},
        
      ],
      allData: [],
      dateList: [],
      tableData: [],
      value: 1,
      value1:'',//时间筛选
      monthList:[],
      reportItem: {},
     
    };
  },
  mounted() {
    this.getMonthList();
    this.getData();
  },
  methods: {
    getTime(time,dayOrNight){
      console.log(time,dayOrNight,'getTime');
      if (dayOrNight) {
        return `${time} 白班`
      }else {
        return `${time} 夜班`
      }
    },
    handleEvents() {
      this.drawer = false;
    },
    // goOriginalData(row) {
    //   const payload = {
    //     code: row.code,
    //   };
    //   getOriginalData(payload).then((res) => {
    //     if (res.data.code === 200) {
    //       window.location.href = "http://" + res.data.data;
    //     }
    //   });
    // },
    goReportDetail(row) {
      console.log(row,'row');
      const routeUrl = this.$router.resolve({
        path: "/reportDetail3",
        query: row,
      });
      // console.log("row为",row)
      window.open(routeUrl.href, "_blank");
    },
    handleClose() {
      this.drawer = false;
    },
    async getMonthList(){
      const params = {
        theyName: "浸渍",
      };
       const res = await MonthReports(params);
       const aaa = res.data.data.pageData
       aaa.forEach((item)=>{
        let arr ={
          name:item.times,
          value:item.times
        }
        this.monthList.push(arr)
       })
       //加上最新月
       var day = new Date()
       var year = day.getFullYear()
       var month = day.getMonth() + 1
       if(month<10){
        var currentMonth = year + '-0'+month
       }else{
        var currentMonth = year + '-'+month
       }
       let arr1 = {
          name:currentMonth,
          value:currentMonth
        }
        this.monthList.push(arr1)
        console.log('monthList',this.monthList)
    },
    async getData() {
      console.log('value',this.value);
      window.sessionStorage.setItem('value',this.value)
      const params = {
        theyName:'浸渍',
        createTime:this.value1,
        currPage: this.currentPage,
        pageSize: this.pageSize
      }
      if(this.value == 1){
        // const result = await DailyReports(params);
        // const abc = result.data.data.pageData;
        // this.totalCount = result.data.data.DayTotalCount;
        // this.allData = abc;
        // if(this.dateList.length!=abc.length){
        //     this.dateList =[]
        //     abc.forEach((item) => {
        //     this.dateList.push(item.times);
        //   });
        // }
        // console.log("datelist", this.dateList);
        // console.log("alldata", abc);
        fetch(`http://192.168.43.15:8070/dipReport/getDipReport?theyName=浸渍&pageSize=${this.pageSize}&currPage=${this.currentPage}`).then((res)=>{
          return res.json()
        }).then( async(result)=>{
        console.log('result',result)
        const abc = result.data.pageData;
        this.totalCount = result.data.DayTotalCount;
        this.allData = abc;
        if(this.dateList.length!=abc.length){
            this.dateList =[]
            abc.forEach((item) => {
            this.dateList.push(item.times);
          });
        }
        // console.log("datelist", this.dateList);
        console.log("alldata", abc);
        })
       
      }else if (this.value == 2){
        const res = await MonthReports(params);
      const abc = res.data.data.pageData;
      this.totalCount = res.data.data.total;
      this.allData = abc;
      if(this.dateList.length!=abc.length){
        this.dateList =[]
        abc.forEach((item) => {
        this.dateList.push(item.times);
      });
      }
      }
      
    },

    handleSizeChange(value) {
      this.pageSize = value;
      this.getData();
    },
    handleCurrentChange(value) {
      this.currentPage = value;
      this.getData();
    },
    // changeApi(a) {
    //   console.log('value',a)
    //   let date = a;
    //   for (let i = 0; i < this.allData.length; i++) {
    //     if (this.allData[i].createTime == date) {
    //       this.num = i;
    //     }
    //   }
    //   console.log("num", this.num);
    // },
  },
};
</script>

<style  scoped>

.cardTop {
    background-color: #fff;
    padding: 15px 0 5px 25px;
    margin-bottom: 15px;
  }
.card-search {
  padding-bottom: 10px;
}
.tablebBtn .el-button {
  padding: 8px 14px;
}
.el-divider {
  margin: 30px 0;
}
.el-link {
  line-height: 1;
  padding-bottom: 12px;
}
.dialogTitle {
  padding: 18px;
  font-size: 18px;
}
.isTow {
   .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 2px 0 0 2px;
  }
   .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0 2px 2px 0;
  }
   .is-active .el-radio-button__inner {
    background-color: $primary;
    border-color: $primary;
  }
}
.el-link {
  color: #409eff;
  font-size: 12px !important;
  padding-bottom: 0;
}
</style>
